<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Picker Direct Client</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            font-weight: 300;
        }
        
        .header p {
            opacity: 0.9;
            font-size: 1.1em;
        }
        
        .content {
            padding: 40px;
        }
        
        .status-card {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 30px;
            border-left: 4px solid #28a745;
        }
        
        .status-card.error {
            border-left-color: #dc3545;
        }
        
        .button-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 15px 25px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        .btn:disabled {
            background: #6c757d;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .btn.protocol {
            background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%);
            box-shadow: 0 4px 15px rgba(232, 67, 147, 0.3);
        }

        .btn.protocol:hover {
            box-shadow: 0 6px 20px rgba(232, 67, 147, 0.4);
        }
        
        .result-area {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin-top: 20px;
            min-height: 100px;
            border: 2px dashed #dee2e6;
        }
        
        .result-area.has-content {
            border-color: #28a745;
            background: #d4edda;
        }
        
        .file-info {
            background: white;
            border-radius: 6px;
            padding: 15px;
            margin: 10px 0;
            border-left: 4px solid #007bff;
        }
        
        .file-path {
            font-family: 'Courier New', monospace;
            background: #e9ecef;
            padding: 8px 12px;
            border-radius: 4px;
            margin: 5px 0;
            word-break: break-all;
        }
        
        .loading {
            display: none;
            text-align: center;
            padding: 20px;
        }
        
        .spinner {
            border: 3px solid #f3f3f3;
            border-top: 3px solid #667eea;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .api-info {
            background: #e3f2fd;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
            border-left: 4px solid #2196f3;
        }

        .api-info code {
            background: #f5f5f5;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: 'Courier New', monospace;
        }

        .feature-info {
            background: #e8f5e8;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
            border-left: 4px solid #28a745;
        }

        .protocol-info {
            background: #fce4ec;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
            border-left: 4px solid #e91e63;
        }

        .protocol-links {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }

        .protocol-link {
            background: white;
            border: 1px solid #e91e63;
            border-radius: 6px;
            padding: 10px;
            text-decoration: none;
            color: #e91e63;
            transition: all 0.3s ease;
            display: block;
            text-align: center;
        }

        .protocol-link:hover {
            background: #e91e63;
            color: white;
            transform: translateY(-2px);
        }

        .section-divider {
            border: none;
            height: 2px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            margin: 30px 0;
            border-radius: 1px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>📁 File Picker Direct Client</h1>
            <p>直接调用Electron服务的文件选择功能</p>
        </div>
        
        <div class="content">
            <div class="api-info">
                <strong>直接调用模式:</strong> 此页面直接与Electron服务通信<br>
                <strong>Electron服务地址:</strong> <code>http://localhost:3001/api</code>
            </div>

            <div class="feature-info">
                <strong>✨ 功能特点:</strong><br>
                • 文件对话框自动显示在最前面<br>
                • Electron窗口默认隐藏，不会干扰使用<br>
                • 支持单文件、多文件、文件夹选择和保存对话框
            </div>

            <div class="protocol-info">
                <strong>🔗 系统协议支持:</strong><br>
                • 已注册自定义协议: <code>rukLocalPy://</code><br>
                • 点击协议链接可自动启动应用并弹出文件选择对话框<br>
                • 选择的文件路径会自动复制到剪贴板<br><br>
                
                <strong>协议链接测试:</strong>
                <div class="protocol-links">
                    <a href="rukLocalPy://select-file" class="protocol-link">
                        📄 选择单个文件<br>
                        <small>rukLocalPy://select-file</small>
                    </a>
                    <a href="rukLocalPy://select-files" class="protocol-link">
                        📄 选择多个文件<br>
                        <small>rukLocalPy://select-files</small>
                    </a>
                    <a href="rukLocalPy://select-folder" class="protocol-link">
                        📁 选择文件夹<br>
                        <small>rukLocalPy://select-folder</small>
                    </a>
                    <a href="rukLocalPy://save-file" class="protocol-link">
                        💾 保存文件对话框<br>
                        <small>rukLocalPy://save-file</small>
                    </a>
                </div>
            </div>

            <div id="status" class="status-card">
                <strong>Electron服务状态:</strong> <span id="status-text">检查中...</span>
            </div>

            <hr class="section-divider">
            
            <div class="button-grid">
                <button class="btn" onclick="selectFile()">📄 选择单个文件</button>
                <button class="btn" onclick="selectFiles()">📄 选择多个文件</button>
                <button class="btn" onclick="selectFolder()">📁 选择文件夹</button>
                <button class="btn" onclick="saveFile()">💾 保存文件对话框</button>
            </div>

            <div class="button-grid">
                <button class="btn protocol" onclick="testProtocol('select-file')">🔗 测试协议 - 单文件</button>
                <button class="btn protocol" onclick="testProtocol('select-files')">🔗 测试协议 - 多文件</button>
                <button class="btn protocol" onclick="testProtocol('select-folder')">🔗 测试协议 - 文件夹</button>
                <button class="btn protocol" onclick="testProtocol('save-file')">🔗 测试协议 - 保存</button>
            </div>
            
            <div class="loading" id="loading">
                <div class="spinner"></div>
                <p>正在打开文件选择对话框...</p>
            </div>
            
            <div class="result-area" id="result">
                <p style="color: #6c757d; text-align: center;">选择文件后，结果将显示在这里</p>
            </div>
        </div>
    </div>

    <script>
        // Electron服务的基础URL
        const ELECTRON_API_BASE = 'http://localhost:3001/api';
        
        // 检查Electron服务状态
        async function checkElectronStatus() {
            try {
                const response = await fetch(`${ELECTRON_API_BASE}/health`);
                const data = await response.json();
                
                const statusElement = document.getElementById('status');
                const statusText = document.getElementById('status-text');
                
                if (data.status === 'ok') {
                    statusElement.className = 'status-card';
                    statusText.textContent = '✅ Electron服务正常运行';
                    enableButtons();
                } else {
                    statusElement.className = 'status-card error';
                    statusText.textContent = '❌ Electron服务响应异常';
                    disableButtons();
                }
            } catch (error) {
                const statusElement = document.getElementById('status');
                const statusText = document.getElementById('status-text');
                statusElement.className = 'status-card error';
                statusText.textContent = '❌ 无法连接到Electron服务，请确保Electron应用已启动';
                disableButtons();
            }
        }
        
        // 启用按钮
        function enableButtons() {
            const buttons = document.querySelectorAll('.btn');
            buttons.forEach(btn => btn.disabled = false);
        }
        
        // 禁用按钮
        function disableButtons() {
            const buttons = document.querySelectorAll('.btn:not(.protocol)');
            buttons.forEach(btn => btn.disabled = true);
        }
        
        // 显示加载状态
        function showLoading() {
            document.getElementById('loading').style.display = 'block';
            document.getElementById('result').style.display = 'none';
        }
        
        // 隐藏加载状态
        function hideLoading() {
            document.getElementById('loading').style.display = 'none';
            document.getElementById('result').style.display = 'block';
        }
        
        // 显示结果
        function showResult(data) {
            const resultElement = document.getElementById('result');
            resultElement.className = 'result-area has-content';
            
            if (data.success) {
                let html = '<h3 style="color: #28a745; margin-bottom: 15px;">✅ 操作成功</h3>';
                
                if (data.filePath) {
                    html += `
                        <div class="file-info">
                            <strong>选择的文件:</strong>
                            <div class="file-path">${data.filePath}</div>
                        </div>
                    `;
                }
                
                if (data.filePaths && data.filePaths.length > 0) {
                    html += `
                        <div class="file-info">
                            <strong>选择的文件 (${data.filePaths.length}个):</strong>
                            ${data.filePaths.map(path => `<div class="file-path">${path}</div>`).join('')}
                        </div>
                    `;
                }
                
                if (data.folderPath) {
                    html += `
                        <div class="file-info">
                            <strong>选择的文件夹:</strong>
                            <div class="file-path">${data.folderPath}</div>
                        </div>
                    `;
                }

                if (data.protocolUrl) {
                    html += `
                        <div class="file-info">
                            <strong>协议链接:</strong>
                            <div class="file-path">${data.protocolUrl}</div>
                            <p style="margin-top: 10px; color: #666;">${data.instructions}</p>
                        </div>
                    `;
                }
                
                resultElement.innerHTML = html;
            } else {
                resultElement.className = 'result-area';
                resultElement.innerHTML = `
                    <h3 style="color: #dc3545; margin-bottom: 15px;">❌ 操作失败</h3>
                    <p>${data.message}</p>
                `;
            }
        }
        
        // 通用的API调用函数
        async function callElectronAPI(endpoint) {
            showLoading();
            try {
                const response = await fetch(`${ELECTRON_API_BASE}/${endpoint}`, { 
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }
                
                const data = await response.json();
                showResult(data);
            } catch (error) {
                showResult({ 
                    success: false, 
                    message: `请求失败: ${error.message}` 
                });
            } finally {
                hideLoading();
            }
        }

        // 测试协议链接
        async function testProtocol(action) {
            try {
                const response = await fetch(`${ELECTRON_API_BASE}/protocol-test?action=${action}`);
                const data = await response.json();
                showResult(data);
            } catch (error) {
                showResult({ 
                    success: false, 
                    message: `协议测试失败: ${error.message}` 
                });
            }
        }
        
        // 选择单个文件
        async function selectFile() {
            await callElectronAPI('select-file');
        }
        
        // 选择多个文件
        async function selectFiles() {
            await callElectronAPI('select-files');
        }
        
        // 选择文件夹
        async function selectFolder() {
            await callElectronAPI('select-folder');
        }
        
        // 保存文件对话框
        async function saveFile() {
            await callElectronAPI('save-file');
        }
        
        // 页面加载时检查状态
        checkElectronStatus();
        
        // 定期检查状态
        setInterval(checkElectronStatus, 10000);
        
        // 初始化时禁用按钮，等待状态检查完成
        disableButtons();
    </script>
</body>
</html> 